<template>
  <div class="simiList">
      <div class="listItem" v-for="item in simiList" :key="item.id" @click="toDetail(item.id)">
        <img :src="item.img1v1Url" />
        <span>{{ item.name }}</span>
        </div>
  </div>
</template>

<script>
import { getSimiSingerAPI } from "@/api";
export default {
  name: "AlikeSinger",
  data() {
    return {
      simiList: [],
    };
  },
  methods: {
    // 获取相同歌手数据
    async getSimiSinger() {
      const res = await getSimiSingerAPI({ id: this.id });
      this.simiList = res.data.artists;
    },
    // 去歌手详情页
      toDetail(id){
      this.$router.push({
        name:'detail',
        query:{
          id,
        }
      })
    }
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    this.getSimiSinger();
  },
};
</script>

<style lang="less" scoped>
.simiList{
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .listItem{
  height: 180px;
  width: 130px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
  span {
    font-weight: lighter;
    font-size: 15px;
    word-break: break-all;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  img {
    width: 130px;
    height: 130px;
    border-radius: 4px;
  }
}
}
</style>